<template>
  <div class="sticky-test-event" style="overflow:auto">
    <h1>{{ message }}</h1>
    <h2>基础知识铺垫：</h2>
    <p style="text-indent: 2em">
        粘性定位是会“固定”在离它最近的一个拥有“滚动机制”的祖先上（滚动机制是指可滚动会出现滑动条的元素），
        如果这个最近的拥有“滚动机制”的祖先被设置overflow:hidden，则没有任何效果.如果可滑动元素被设置overflow:auto，
        但是元素没有滑动，也会没有任何效果
    </p>
    <p>
        <b>它和fixed 的区别是 它不会离文档流、它不会离文档流、它不会离文档流 ……</b>
    </p>
    <p>
        code 、 pre这些元素sticky并不会有任何效果<br>
        display设置为 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column
        的元素或者自身就是这类的标签 如：thead 等，sticky 也不会有效果<br>
        当然也可以认为在display:none的元素上没作用因为你根本看不到。。。
    </p>
    <p>事例</p>
    <code>
        <pre v-pre>
            &lt;div class="contain1"&gt;
                &lt;table&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th class="sticky" width="70"&gt;表头&lt;/th&gt;
                            &lt;th class="sticky" width="70"&gt;表头&lt;/th&gt;
                            &lt;th class="sticky" width="70"&gt;表头&lt;/th&gt;
                            &lt;th class="sticky" width="70"&gt;表头&lt;/th&gt;
                            &lt;th class="sticky" width="70"&gt;表头&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody v-for="item in 100" :key="item"&gt;
                        &lt;tr&gt;
                            &lt;td width="70"&gt;body&lt;/td&gt;
                            &lt;td width="70"&gt;body&lt;/td&gt;
                            &lt;td width="70"&gt;body&lt;/td&gt;
                            &lt;td width="70"&gt;body&lt;/td&gt;
                            &lt;td width="70"&gt;body&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
            // 如果注释 height 和 overflow ，则会默认窗口定位
            // 如果只注释 height 则没有任何效果
            .contain1{
                height: 400px;
                padding: 0 20px;
                border: 1px solid #f4f4f4;
                overflow: auto;
                .sticky{
                    background-color: rgba(111,41,97,.3);
                    position: sticky;
                    top: 0;
                }
                table{
                    width: 100%;
                    text-align: center;
                }
            }
        </pre>
    </code>
    <p>效果预览</p>
    <div class="contain1">
        <table>
            <thead>
                <tr>
                    <th class="sticky" width="70">表头</th>
                    <th class="sticky" width="70">表头</th>
                    <th class="sticky" width="70">表头</th>
                    <th class="sticky" width="70">表头</th>
                    <th class="sticky" width="70">表头</th>
                </tr>
                <!-- <tr>
                    <th width="70">表头</th>
                    <th width="70">表头</th>
                    <th width="70">表头</th>
                    <th width="70">表头</th>
                    <th width="70">表头</th>
                </tr> -->
            </thead>
            <tbody v-for="item in 100" :key="item">
                <tr>
                    <td width="70">body</td>
                    <td width="70">body</td>
                    <td width="70">body</td>
                    <td width="70">body</td>
                    <td width="70">body</td>
                </tr>
            </tbody>
        </table>
    </div>
    <p>附上兼容性一张</p>
    <img src="../../images/css/stickyCanUse.jpg" class="img-shadow"/>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class sticky extends Vue {
        // data 在这
        message: string = '利用sticky 实现固定表头'

    }
</script>
<style lang="scss">
.sticky-test-event{
    width: 100%;
    .contain1{
        height: 400px;
        padding: 0 20px;
        border: 1px solid #f4f4f4;
        overflow: auto;
        table{
            width: 100%;
            text-align: center;
        }
    }
    .sticky{
        background-color: rgba(111,41,97,.3);
        position: sticky;
        top: 0;
    }
}
</style>